{% extends "base.html" %}
{% load i18n %}

{% block title %} {% trans "[TITLE] Search" %} - Mr. Edu {%endblock%}

{% block section%}
	
	<!-- 
	<p id="breadCrumbs">
		<a href="/mrEdu/{{userRole}}/collections">{% trans "[BREADCRUMB] My collections" %}</a>
		<span class="hidden">&gt;</span>
		<span class="itemName">{{collection.name}}</span>
	</p>
	 -->
	
	<h1>{% trans "[TITLE] Search" %}</h1>
	
	<form id="search" onsubmit="return loading()" action="/mrEdu/{{userRole}}/search/result" method="post" accept-charset="UTF-8">
		<input type="hidden" name="criteriaNumber" id="criteriaNumber" value="0">
		<fieldset>
			<legend>{% trans "[LEGEND] What are you looking for?" %}</legend>
			<div id="searchCriteria" class="borderTop">
				{% if feedback%}
				<div id="feedback">
					{% for item in feedback %}
					{{item|safe}}
					{% endfor %}
				</div>
				{% endif %}
				
				<div id="filter0">
					<label>
						<span class="hidden">{% trans "[LABEL] Keywords" %}:</span>
						<input class="text" type="text" id="keywords" name="keywords" value="{{formData.keywords}}">
					</label>
				</div>
			</div>
			<input class="button submit" type="submit" id="submit" value="{% trans "[BUTTON] Search" %}">
			{% csrf_token %}
		</fieldset>
	</form>
	
{%endblock%}

{% block script%}
	<script type="text/javascript">
		var filter = 0;
		var filterLimit = 7;
		var end = false;
		
		HTMLaddFilter = '<span class="button filter"><a onclick="return addFilter()" href="#" title="{% trans "[FILTER] Add filter" %}">+</a></span>';
		HTMLremoveFilter = '<span class="button filter"><a onclick="return removeFilter()" href="#" title="{% trans "[FILTER] Remove filter" %}">-</a></span>';
		
		if(filter == 0)
			{
				$("#filter0").append(HTMLaddFilter);
			}
		
		function addFilter()
			{
				if(filter < filterLimit)
					filter++;
				
				/*
				<label>
					<span class="hidden">{% trans "[LABEL] Criterion" %}:</span>
					<select id="criterion" name="criterion">
						<option selected="selected" value="type">{% trans "[FILTER] Type" %}</option>
						<!--<option value="user">{% trans "[FILTER] User" %}</option>-->
						<option value="folder">{% trans "[FILTER] Folder" %}</option>
					</select>
				</label>
				*/
				HTMLcriterion = '<label id="labelCriterion' + filter + '"><span class="hidden">{% trans "[LABEL] Criterion" %} ' + filter + ':</span><select onchange="return changeCriterion(' + filter + ')" id="criterion' + filter + '" name="criterion' + filter + '"><option selected="selected" value="type">{% trans "[FILTER] Type" %}</option><!--<option value="user">{% trans "[FILTER] User" %}</option>--><option value="folder">{% trans "[FILTER] Folder" %}</option></select></label>';
				
				/*
				<label>
					<span class="hidden">{% trans "[LABEL] Content type" %}:</span>
					<select id="contentType" name="contentType">
						<option selected="selected" value="all">{% trans "[FILTER] All" %}</option>
						<option value="audio">{% trans "[FILTER] Audio" %}</option>
						<option value="photo">{% trans "[FILTER] Image" %}</option>
						<option value="text">{% trans "[FILTER] Text" %}</option>
						<option value="video">{% trans "[FILTER] Video" %}</option>
					</select>
				</label>
				*/
				HTMLcontentType = '<label id="labelValue' + filter + '"><span class="hidden">{% trans "[LABEL] Content type" %}:</span><select id="criterionValue' + filter + '" name="criterionValue' + filter + '"><option selected="selected" value="all">{% trans "[FILTER] All" %}</option><option value="audio">{% trans "[FILTER] Audio" %}</option><option value="image">{% trans "[FILTER] Image" %}</option><option value="text">{% trans "[FILTER] Text" %}</option><option value="video">{% trans "[FILTER] Video" %}</option></select></label>';
				
				if(filter < filterLimit)
					{
						$("#searchCriteria").append('<div id="filter' + filter + '">' + HTMLcriterion + ' ' + HTMLcontentType + HTMLaddFilter + ' ' + HTMLremoveFilter +'</div>');
						$('#criteriaNumber').attr('value', filter);
					}
				else if (filter == filterLimit && !end)
					{
						$("#searchCriteria").append('<div id="filter' + filter + '">' + HTMLcriterion + ' ' + HTMLcontentType + HTMLremoveFilter +'</div>');
						$('#criteriaNumber').attr('value', filter);
						end = true;
					}
				
				return false;
			}
		
		function removeFilter()
			{
				$("#filter" + filter).remove();
				filter--;
				$('#criteriaNumber').attr('value', filter);
				end = false;
				return false;
			}
		
		function changeCriterion(filterNumber)
			{
				//alert($('#criterion' + filterNumber).val());
				var criterion = $('#criterion' + filterNumber).val();
				
				switch(criterion)
					{
						case 'folder':
							{
								$('#labelValue' + filterNumber).remove();
								HTMLfolders = '<label id="labelValue' + filter + '"><span class="hidden">{% trans "[LABEL] Content type" %}:</span><select id="criterionValue' + filter + '" name="criterionValue' + filter + '"><option selected="selected" value="all">{% trans "[FILTER] All" %}</option>{% for i in collections %}<option value="{{i.id}}">{{i.name}}</option>{% endfor %}</select></label>';
								$('#filter' + filterNumber).append(HTMLfolders);
								break;
							}
						default:
							{
								$('#labelValue' + filterNumber).remove();
								HTMLcontentType = '<label id="labelValue' + filter + '"><span class="hidden">{% trans "[LABEL] Content type" %}:</span><select id="criterionValue' + filter + '" name="criterionValue' + filter + '"><option selected="selected" value="all">{% trans "[FILTER] All" %}</option><option value="audio">{% trans "[FILTER] Audio" %}</option><option value="image">{% trans "[FILTER] Image" %}</option><option value="text">{% trans "[FILTER] Text" %}</option><option value="video">{% trans "[FILTER] Video" %}</option></select></label>';
								$('#filter' + filterNumber).append(HTMLcontentType);
							}
					}
				
				return false;
			}
	</script>
{% endblock %}